<template>
    <div class="jianzhan-content">
        <Crumb :name ="$t('deli.delivery')"> </Crumb>
        <div class="content">
            <el-button type="primary"
                       size="small" icon="el-icon-plus"
                       @click="dialogVisible = true"
                       v-if="urlAvailible('jianzhan-delivery-operate')">{{$t('deli.add')}}</el-button>
            <el-input v-model="key"
                      :placeholder="$t('deli.sendGoodsContract')"
                      size="small"
                      style="margin-left: 20px;width: 200px;"></el-input>
            <!--<a class="link-btn" target="_blank" href="http://static.sh-inline.com/模版.xlsx">模版下载</a>-->
            <div class="table-wrapper">
                <el-table
                        :data="deliveryList.filter(item => item.sendGoodsContract.includes(key))"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            :label="$t('deli.index')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="sendGoodsContract"
                            :label="$t('deli.sendGoodsContract')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="boxNumber"
                            :label="$t('deli.boxNumber')">
                    </el-table-column>
                    <el-table-column
                            prop="sendTotalMoney"
                            :label="$t('deli.sendTotalMoney')">
                    </el-table-column>
                    <el-table-column
                            prop="leaveFactoryDateStr"
                            :label="$t('deli.leaveFactoryDateStr')">
                    </el-table-column>
                    <el-table-column
                            prop="port"
                            :label="$t('deli.port')">
                    </el-table-column>
                    <el-table-column
                            prop="shipInformation"
                            :label="$t('deli.shipInformation')">
                    </el-table-column>
                    <el-table-column
                            prop="boxList"
                            :label="$t('pApply.box')">
                        <template slot-scope="scope">
                            <a :href="scope.row.boxList" target="_blank">{{scope.row.boxList | getFileName}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column
                     >
                        <template slot-scope="scope">
                            <el-button type="primary"
                                       icon="el-icon-edit"
                                       @click="openEdit(scope.row)">{{$t('edit')}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog
                :title="$t('deli.add')"
                :visible.sync="dialogVisible"
                width="80%"
        >
            <el-form ref="form" :model="delivery" label-width="100px" style="text-align: left">
                <el-form-item :label="$t('deli.sendGoodsContract')">
                    <el-select v-model="delivery.consignmentId"
                               clearable
                               @change="contractChange"
                               placeholder="Please Select Contract"
                               size="small"
                               class="input">
                        <el-option
                                v-for="item in consignmentList"
                                :key="item.id"
                                :label="item.purchaseContractNumber"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="delivery.supplier"
                               :placeholder="$t('pApply.supplier')"
                               size="small"
                               @change="vendorChange">
                        <el-option
                                v-for="item in vendorList"
                                :key="item.id"
                                :label="item.chineseName"
                                :value="item.chineseName">
                        </el-option>
                    </el-select>
                    <span>{{delivery.supplierCode}}</span>
                    <el-select v-model="delivery.times" placeholder="Please Select delivery frequency" size="small"
                               class="input">
                        <el-option
                                label="A"
                                value="A">
                        </el-option>
                        <el-option
                                label="B"
                                value="B">
                        </el-option>
                        <el-option
                                label="C"
                                value="C">
                        </el-option>
                        <el-option
                                label="D"
                                value="D">
                        </el-option>
                        <el-option
                                label="E"
                                value="E">
                        </el-option>
                        <el-option
                                label="F"
                                value="F">
                        </el-option>
                        <el-option
                                label="G"
                                value="G">
                        </el-option>
                        <el-option
                                label="H"
                                value="H">
                        </el-option>
                        <el-option label="All" value="All">
                        </el-option>
                    </el-select>
                    <span>{{sendGoodsContract}}</span>
                </el-form-item>
                <el-form-item :label="$t('deli.supplierContractNumber')">
                    <span style="margin: 0 10px;display: inline-block">{{delivery.supplierContractNumber}}</span>
                </el-form-item>
                <!--<el-form-item label="件数">-->
                    <!--<el-input v-model="delivery.boxNumber" placeholder="Box Number" size="small"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="船号">-->
                    <!--<el-input v-model="delivery.shipInformation" placeholder="Ship No" size="small"></el-input>-->
                <!--</el-form-item>-->
                <el-form-item :label="$t('deli.sendTotalMoney')">
                    <el-currency-input v-model="delivery.sendTotalMoney" :placeholder="$t('deli.sendTotalMoney')" size="small"> </el-currency-input>
                </el-form-item>
                <el-form-item label="SHI-IEL(Rmb)">
                    <el-currency-input v-model="delivery.shIel" placeholder="SHI-IEL" size="small"> </el-currency-input>
                </el-form-item>
                <el-form-item label="IEL-Customer(IDR)">
                    <el-currency-input :type=2 v-model="delivery.ielCustomer" placeholder="IEL-Customer" size="small"> </el-currency-input>
                </el-form-item>
                <el-form-item :label="$t('con.packagePrice')">
                    <el-currency-input v-model="delivery.packagePrice" :placeholder="$t('con.packagePrice')" size="small"> </el-currency-input>
                </el-form-item>
                <el-form-item :label="$t('con.transportPrice')">
                    <el-currency-input v-model="delivery.transportPrice" :placeholder="$t('con.transportPrice')" size="small"> </el-currency-input>
                </el-form-item>
                <el-form-item :label="$t('con.otherPrice')">
                    <el-currency-input v-model="delivery.otherPrice" :placeholder="$t('con.otherPrice')" size="small"> </el-currency-input>
                </el-form-item>
                <el-form-item :label="$t('deli.port')">
                    <el-select v-model="delivery.port" :placeholder="$t('deli.port')" size="small">
                        <el-option label="SH" value="SH"></el-option>
                        <el-option label="ZJG" value="ZJG"></el-option>
                        <el-option label="DHL" value="DHL"></el-option>
                        <el-option label="NB" value="NB"></el-option>
                    </el-select>
                </el-form-item>
                <!--<el-form-item label="空运">-->
                <!--<el-input v-model="delivery.airTransport" placeholder="Air transport"></el-input>-->
                <!--</el-form-item>-->
                <el-form-item :label="$t('deli.leaveFactoryDateStr')">
                    <el-date-picker v-model="delivery.leaveFactoryDateStr" value-format="yyyy-MM-dd"
                                    :placeholder="$t('deli.leaveFactoryDateStr')" size="small"></el-date-picker>
                </el-form-item>
                <div style="margin-bottom: 20px" v-if="urlAvailible('jianzhan-delivery-operate')">
                    <label for="file1" class="label-btn">{{$t('deli.upload')}}</label>
                    <input type="file"
                           @change="fileChange1"
                           id="file1"
                           v-show="false" ref="file1">
                    <span>{{delivery.boxList | getFileName}}</span>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="submitForm" v-if="urlAvailible('jianzhan-delivery-operate')">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import {purchaseContact, deliveryList, addDelivery, modDelivery,getVendorByDeliveryContractId} from "../../api/jianzhan";
    import {uploadPackageList} from "../../api/contract";
    import {ERROR_OK} from "../../util/config";
    import {getFileName} from "../../util";
    import authMixins from '../../util/authMixins'

    export default {
        name: "delivery",
        mixins:[authMixins],
        data() {
            return {
                key:'',
                deliveryList: [],
                vendorList: [],
                consignmentList: [],
                delivery: {
                    consignmentId: '',
                    shipInformation: '',
                    contractNumber: '',
                    times: '',
                    // airTransport:'',
                    boxNumber: '',
                    supplierName: '',
                    sendTotalMoney: 0,
                    port: '',
                    supplier: '',
                    shIel:0,
                    ielCustomer:0,
                    packagePrice: 0,
                    otherPrice: 0,
                    transportPrice: 0,
                    leaveFactoryDateStr: '',
                    boxList: '',
                },
                dialogVisible: false
            }
        },
        computed: {
            sendGoodsContract() {
                return this.delivery.contractNumber + '-' + this.delivery.times
            }
        },
        filters: {
            getFileName(name) {
                return getFileName(name)
            }
        },
        created() {
            this.getConsignmentList();
            this.getDeliveryList()
        },
        methods: {
            vendorChange(v){
                if(!v) {
                    this.$set(this.delivery,'supplierCode','')
                } else {
                    const target = this.vendorList.find(item => {
                        return item.chineseName === v
                    });
                    if (target) {
                        this.$set(this.delivery,'supplierCode',target.supplierCode)
                    }
                }
            },
            async submitForm() {
                const {
                    id,
                    supplierContractNumber,
                    shIel,
                    ielCustomer,
                    consignmentId,
                    boxNumber,
                    sendTotalMoney,
                    port,
                    leaveFactoryDateStr,
                    boxList,
                    shipInformation,
                    supplier,
                    packagePrice,
                    otherPrice,
                    transportPrice
                } = this.delivery;
                const sendGoodsContract = this.sendGoodsContract;
                if(id) {
                    const {status, msg} = await modDelivery({
                        id,
                        supplierContractNumber,
                        shIel,
                        ielCustomer,
                        consignmentId,
                        boxNumber,
                        sendTotalMoney,
                        port,
                        leaveFactoryDateStr,
                        boxList,
                        shipInformation,
                        sendGoodsContract,
                        supplier,
                        packagePrice,
                        otherPrice,
                        transportPrice
                    });
                    if (status === ERROR_OK) {
                        this.getDeliveryList();
                        this.$notify.success('修改发运合同成功');
                        this.dialogVisible = false;
                        this.clear()
                    } else {
                        this.$notify.error(msg)
                    }
                } else {
                    const {status, msg} = await addDelivery({
                        consignmentId,
                        supplierContractNumber,
                        boxNumber,
                        shIel,
                        ielCustomer,
                        sendTotalMoney,
                        port,
                        leaveFactoryDateStr,
                        boxList,
                        shipInformation,
                        sendGoodsContract,
                        supplier,
                        packagePrice,
                        otherPrice,
                        transportPrice
                    });
                    if (status === ERROR_OK) {
                        this.getDeliveryList();
                        this.$notify.success('添加发运合同成功');
                        this.dialogVisible = false
                        this.clear()
                    } else {
                        this.$notify.error(msg)
                    }
                }


            },
            clear() {
                this.delivery = {
                    id: '',
                    shIel:0,
                    ielCustomer:0,
                    supplierCode:'',
                    supplierContractNumber:'',
                    consignmentId: '',
                    shipInformation: '',
                    contractNumber: '',
                    times: '',
                    boxNumber: '',
                    supplierName: '',
                    sendTotalMoney: 0,
                    port: '',
                    supplier: '',
                    packagePrice: 0,
                    otherPrice: 0,
                    transportPrice: 0,
                    leaveFactoryDateStr: '',
                    boxList: '',
                };
                this.partList = []
            },
            openEdit(row){
                this.delivery = row;
                this.$set(this.delivery,'contractNumber',row.sendGoodsContract.substr(0,row.sendGoodsContract.length-2));
                this.$set(this.delivery,'times',row.sendGoodsContract.substr(row.sendGoodsContract.length-1,1));
                this.dialogVisible = true
            },
            async fileChange1(e) {
                const formData = new FormData();
                Array.prototype.forEach.call(e.target.files, item => {
                    formData.append('exFiles', item)
                });
                const {status, data} = await uploadPackageList(formData);
                if (status === 0) {
                    this.$set(this.delivery, 'boxList', data.file_path[0])
                }
            },
            async getDeliveryList() {
                const {status, data} = await deliveryList();
                if (status === ERROR_OK) {
                    this.deliveryList = data
                }
            },
            contractChange(key) {
                const target = this.consignmentList.find(item => item.id === key);
                if (target) {
                    this.delivery.contractNumber = target.purchaseContractNumber;
                    this.$set(this.delivery, 'supplierName', target.supplierName);
                    this.$set(this.delivery, 'supplierContractNumber', target.supplierContractNumber);
                    this.getVendorById(target.purchaseApplicationId);
                }
            },
            async getVendorById(id) {
                const {status,data} = await getVendorByDeliveryContractId(id);
                if (status === ERROR_OK) {
                    this.vendorList = data;
                    this.delivery.supplier= '';
                }
            },
            async getConsignmentList() {
                const {status, data} = await purchaseContact(1);
                if (status === ERROR_OK) {
                    this.consignmentList = data ? data : [];
                } else {
                    this.consignmentList = [];
                }
            }
        },
        components: {
            Crumb
        }
    }
</script>

<style scoped lang="scss">
    @import '../../css/mixins';
    @import '../../css/variable';

    .content {
        @include content
    }

    .link-btn {
        @include linkBtn
    }

    .label-btn {
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: white;
        background-color: #409eff;
        border-radius: 3px;
        padding: 5px 15px;
        display: block;
        width: 120px;
    }
</style>